<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3用户界面</title>
		<style>
			/* 
			 appearance 	允许您将元素设置为标准用户界面元素的外观 	
			 box-sizing 	允许您以确切的方式定义适应某个区域的具体内容。 	
			 icon 	为创作者提供使用图标化等价物来设置元素样式的能力。 	
			 nav-down 	规定在使用 arrow-down 导航键时向何处导航。 	
			 nav-index 	设置元素的 tab 键控制次序。 	
			 nav-left 	规定在使用 arrow-left 导航键时向何处导航。 	
			 nav-right 	规定在使用 arrow-right 导航键时向何处导航。 	
			 nav-up 	规定在使用 arrow-up 导航键时向何处导航。 	
			 outline-offset 	对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 	
			 resize 	规定是否可由用户对元素的尺寸进行调整。*/
			.div1
			{
			border:2px solid;
			padding:10px 40px; 
			width:300px;
			resize:both;
			overflow:auto;
			}
			div.container
			{
			width:30em;
			border:1em solid;
			}
			div.box
			{
			box-sizing:border-box;
			-moz-box-sizing:border-box; /* Firefox */
			-webkit-box-sizing:border-box; /* Safari */
			width:50%;
			border:1em solid red;
			float:left;
			}
			.div2
			{
			margin:20px;
			width:150px; 
			padding:10px;
			height:70px;
			border:2px solid black;
			outline:2px solid red;
			outline-offset:15px;
			} 
		</style>
	</head>
	<body>
		<h1>CSS3 用户界面</h1>
		<p>在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。</p>
		<ul>
			<li><b>resize 属性规定是否可由用户调整元素尺寸。</b></li>
			<li><b>box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。</b></li>
			<li><b>outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。</b></li>
		</ul>
		
		<div class="div1">resize 属性规定是否可由用户调整元素尺寸。</div>
		<p><b>注释：</b> Firefox 4+、Safari 以及 Chrome 支持 resize 属性。</p>
		
		<div class="container">
		<div class="box">这个 div 占据左半部分。</div>
		<div class="box">这个 div 占据右半部分。</div>
		</div>
		
		<p><b>注释：</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>
		
		<div class="div2">这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>
		
	</body>
</html>
